<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>



<!-- 文档地址 https://getbootstrap.net/docs/components/list-group/ -->
<ul class="list-group" style="font-size: 14px">
	<li class="list-group-item active">测试列表</li>
	<li class="list-group-item">测试列表2</li>
	<li class="list-group-item">测试列表3</li>
	<li class="list-group-item">测试列表4</li>
	<li class="list-group-item">测试列表5</li>
</ul>

<script type="text/javascript">
	//获取列表项
	var list=$('.list-group .list-group-item');
	//列表点击事件
	list.click(function(){
		console.log($(this).index());
		//利用addClass()、removeClass()来控制当前点击项的样式。
		//siblings()可获取当前点击项的其他兄弟元素
		//$(this).addClass('active')
		//$(this).siblings().removeClass('active');
	});
</script>
